<template>
  <div class="permissions-container">
    <el-row type="flex" justify="end">
      <el-button type="primary" @click="addBtn">添加权限</el-button>
    </el-row>
    <!-- 权限列表  -->
    <el-card class="table">
      <el-table :data="permissionsList" border style="width: 100%" row-key="id">
        <el-table-column prop="title" label="权限名称" width="180"> </el-table-column>
        <el-table-column prop="code" label="权限标识" width="180"> </el-table-column>
        <el-table-column prop="description" label="权限描述"> </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <div>
              <el-button v-if="row.type === '1'" type="primary" size="small" @click="addSubBtn(row.id)">添加子权限</el-button>
              <el-button size="small" @click="editBtn(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delBtn(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增权限弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="showDialog" width="50%" :before-close="handleClose">
      <!-- 权限表单 -->
      <el-form :model="permissionForm" :rules="rules" ref="permissionForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="权限名称" prop="title">
          <el-input v-model="permissionForm.title"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="permissionForm.code"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="permissionForm.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { allPermission, getRolePermission, addPermission, editPermission, deletePermission } from '@/api/permissions.js'
import { listToTree } from '@/utils/fn_index'
export default {
  data() {
    return {
      /** 权限列表数据 */
      permissionsList: [],
      /** 显示弹窗 */
      showDialog: false,
      /** 表单标题 */
      dialogTitle: '',
      /** 弹窗表单 */
      permissionForm: {
        title: '',
        code: '',
        description: '',
        /** 上一级权限id, 一级权限为 '0' */
        pid: '',
        /** 权限层级 '1'(一级权限) 或 '2'(二级权限) */
        type: ''
      },
      /** 表单验证 */
      rules: {
        title: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          { max: 15, message: '长度不要超过 15 个字符', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入权限标识', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getPermissionsList()
  },
  methods: {
    /** 获取权限列表 */
    async getPermissionsList() {
      let res = await allPermission()
      // console.log(res.data)
      this.permissionsList = listToTree(res.data, '0')
      // console.log(this.permissionsList)
    },

    /** 点击添加权限，弹出表单 */
    addBtn() {
      this.dialogTitle = '添加权限'
      this.permissionForm.pid = '0'
      this.permissionForm.type = '1'
      this.showDialog = true
    },

    /** 点击添加子权限，弹出表单 */
    addSubBtn(id) {
      // console.log(id)
      this.dialogTitle = '添加子权限'
      this.permissionForm.pid = String(id)
      this.permissionForm.type = '2'
      this.showDialog = true
    },

    /** 点击编辑权限按钮，获取权限，信息回流，弹出表单 */
    async editBtn(id) {
      this.dialogTitle = '编辑权限'
      let res = await getRolePermission(id)
      console.log(res.data)
      this.permissionForm = res.data
      this.showDialog = true
    },

    /** 用户确认，删除权限，刷新页面 */
    async delBtn(id) {
      this.$confirm('确认删除该权限？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deletePermission(id)
          this.getPermissionsList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    /** 提交表单，刷新页面，关闭弹窗 */
    submit() {
      this.$refs['permissionForm'].validate(async valid => {
        if (valid) {
          /** 添加权限 */
          if (this.permissionForm.id === undefined) {
            await addPermission(this.permissionForm)
            this.$message({
              type: 'success',
              message: '添加权限成功'
            })
          } else {
            /** 编辑权限 */
            await editPermission(this.permissionForm)
            this.$message({
              type: 'success',
              message: '编辑权限成功'
            })
          }
          this.getPermissionsList()
          this.handleClose()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    /** 关闭弹窗, 清理表单内容及校验结果 */
    handleClose() {
      this.showDialog = false
      this.permissionForm = {
        title: '',
        code: '',
        description: '',
        pid: '',
        type: ''
      }
      this.$refs['permissionForm'].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.permissions-container {
  padding: 20px;

  .table {
    margin-top: 20px;
  }
}
</style>
